<template>
	<div class="personal layout-pd">
		<el-row>
			<el-col :span="24">
				<el-card shadow="hover" header="个人信息">
					<div class="personal-user">
						<div class="personal-user-left">
							<img :src="avatar" />
						</div>
						<div class="personal-user-right">
							<el-row>
								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，<span
										style="color: goldenrod">{{ userInfo.Name }}</span>
								</el-col>
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">用户名称：</div>
											<div class="personal-item-value">{{ userInfo.Name }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录IP：</div>
											<div class="personal-item-value">{{ userInfo.IP }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录时间：</div>
											<div class="personal-item-value">{{ userInfo.LoginTime }}</div>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">用户角色：</div>
											<div class="personal-item-value">{{ userInfo.RoleName }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录设备：</div>
											<div class="personal-item-value">{{ userInfo.Browser }}</div>
										</el-col>
										<!-- <el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录地址：</div>
											<div class="personal-item-value">{{ userInfo.LoginAddr }}</div>
										</el-col> -->
									</el-row>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row class="mt20">
			<el-col :span="24">
				<div style="width: 95%; height: 260px" ref="loginLogRef"></div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="personal">
import { Session } from '/@/utils/storage';
import { ElMessageBox } from 'element-plus';
import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import avatar from '/@/assets/image/avatar.webp';
import { Get } from '/@/common/http';
import * as signalR from '@microsoft/signalr';
import EMsg from '/@/common/eMsg';

const userInfo = ref({
	Name: '',
	RoleName: '',
	IP: '',
	LoginTime: '',
	Browser: '',
});

const connection = ref<any>();

const connectSignalR = async () => {

	connection.value = new signalR.HubConnectionBuilder()
		.withUrl(
			"WS://111.230.31.22:801/hubs/fortunatehub",
			{
				accessTokenFactory: () => Session.get("UserToken"),
				skipNegotiation: true,
				transport: signalR.HttpTransportType.WebSockets
			})
		.configureLogging(signalR.LogLevel.Information)
		.build();

	connection.value.on('ClientLoginOut', () => {
		ElMessageBox.alert('账号已在其他设备登录', '提示', {
			confirmButtonText: '确定',
			type: 'warning',
			showClose: false,
		}).then(() => {
			Session.clear();
			window.location.reload();
		});
	});

	connection.value.on('SendMessage', (newMessage: string) => {
		console.log(newMessage);
	});

	try {
		await connection.value.start();
		console.log('已连接');
	} catch (err) {
		console.error('发生错误', err);
	}
};

const currentTime = computed(() => {
	return formatAxis(new Date());
});
// 如果你需要响应式地处理连接状态变化，可以使用watchEffect或其他响应式API  
watchEffect(() => {
	if (connection.value && connection.value.state === signalR.HubConnectionState.Disconnected) {
		// 可以在这里尝试重新连接  
		console.log('SignalR connection disconnected, attempting to reconnect...');
		// 注意：在实际应用中，你可能需要实现更复杂的重连逻辑  
	}
});

onUnmounted(() => {
	if (connection.value && connection.value.state === signalR.HubConnectionState.Connected) {
		connection.value.stop().then(() => {
			console.log('SignalR connection stopped.');
		}).catch((err: any) => {
			console.error('Error stopping SignalR connection:', err);
		});
	}
});
onMounted(() => {
	connectSignalR();
	Get('SysUser/GetLoginUserInfo').then((res: any) => {
		userInfo.value = res.Data;
	});
});
</script>

<style scoped lang="scss">
.personal {
	.personal-user {
		height: 130px;
		display: flex;
		align-items: center;

		.personal-user-left {
			width: 130px;
			height: 130px;
			border-radius: 3px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 3px;
			}

			&:hover {
				img {
					animation: logoAnimation 0.3s ease-in-out;
				}
			}
		}

		.personal-user-right {
			flex: 1;
			padding: 0 15px;

			.personal-title {
				font-size: 18px;
			}

			.personal-item {
				display: flex;
				align-items: center;
				font-size: 13px;
				line-height: 25px;

				.personal-item-label {
					color: var(--el-text-color-secondary);
					width: 70px;
					text-align: right;
				}

				.personal-item-value {
					font-size: 14px;
				}
			}
		}
	}
}
</style>
